<template>
	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
		<div class="layout-view-bg-white">
			<div id="left-panel" class="" style="height: 552px;">
				<div id="searchbox" class="clearfix">
					<div id="searchbox-container" style="width:340px;">
						<div id="sole-searchbox-content" class="searchbox-content">
							<input @click="searchBoxFocus" v-model="searchContent.address" id="sole-input" class="searchbox-content-common" type="text" name="word"
							autocomplete="off" maxlength="256" placeholder="搜地点">							
							<div class="input-clear" title="清空" style="display: block;" @click="closeSearchContent">
							</div>							
							<div v-if="false" class="searchbox-content-button right-button route-button loading-button"
							 data-title="疏散路线" @click="clickGhLuxian">
							</div>
							<!--搜索提示从数据库查找start-->							
							<div v-if="isShowSearchSug" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 40.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 368px;">
									<div @click="setSearchInput(sugItem)" class="ui3-suggest-item" v-for="sugItem in searchSugItems" :key="sugItem.address"><a>
										<i class="default" >{{sugItem.address}}</i></a></div> 
								</div>
							</div>
							<!--搜索提示从数据库查找end-->
							<!--搜索起终点提示从数据库查找start-->							
							<div v-if="isShowQizhongSug" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 155.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 368px;">
									<div @click="setQizhongdianInput(sugItem)" class="ui3-suggest-item" v-for="sugItem in searchSugItems" :key="sugItem.address"><a><i class="default">{{sugItem.address}}</i></a></div> 
								</div>
							</div>
							<!--搜索起终点提示从数据库查找end-->
							
						</div>
<!--路线start-->						
					<div v-if="false" id="route-searchbox-content" class="searchbox-content route-searchbox-content" :class="curRouteIndex">
						<div class="route-header">
							<div class="searchbox-content-common route-tabs">
								<div class="tab-item bus-tab" data-index="bus" @click="changeRouteIndex(event)">
									<i></i>
									<span>大巴</span>
								</div>
								<div class="tab-item drive-tab" data-index="drive" @click="changeRouteIndex(event)">
									<i></i>
									<span>驾车</span>
								</div>
								<div class="tab-item walk-tab" data-index="walk" @click="changeRouteIndex(event)">
									<i></i>
									<span>步行</span>
								</div>
								<div class="tab-item bike-tab" data-index="bike" @click="changeRouteIndex(event)">
									<i></i>
									<span>骑行</span>
								</div>
								<div class="arrow-wrap">
								</div>
							</div>
							<div class="searchbox-content-button right-button cancel-button loading-button"
							data-title="关闭路线" data-tooltip="2" @click="{showLuxian=false;startGhLuxian.address='';endGhLuxian.address='';}">
							</div>
						</div>
						<div class="routebox">
							<div class="searchbox-content-common routebox-content">
								<div class="routebox-revert" title="切换起终点">
									<div class="routebox-revert-icon">
									</div>
								</div>
								<div class="routebox-inputs">
									<div class="routebox-input route-start">
										<div class="route-input-icon">
										</div>
										<input @click="startGhLuxianFocus" v-model="startGhLuxian.address" autocomplete="off" maxlength="256" placeholder="输入起点或在图区上选点" class="route-start-input"
										type="text">
										<div class="input-clear" title="清空" style="display: block;" @click="startGhLuxian.address=''">
										</div>
										<div class="route-input-add-icon">
										</div>
									</div>
									<div class="routebox-input route-end">
										<div class="route-input-icon">
										</div>
										<input @click="endGhLuxianFocus" v-model="endGhLuxian.address" autocomplete="off" maxlength="256" placeholder="输入终点" class="route-end-input"
										type="text">
										<div class="input-clear" title="清空" style="display: block;" @click="endGhLuxian.address=''">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
<!--路线end-->						
					</div>
					<button class="searchLeft" id="search-button" data-title="搜索" @click="searchAddr">
					</button>
					<div id="toast-wrapper">
						<div id="toast">
							<img class="info-tip-img" src="/static/images/transparent.gif" alt="">
							<span class="info-tip-text">
							</span>
						</div>
					</div>					
				</div>
				<ul id="cards-level0" class="cardlist">
				</ul>
				<ul id="cards-level1" class="cardlist">
				</ul>
				<ul id="cards-level2" class="cardlist">
				</ul>
			</div>
			
			<div id="app-right-top">
				<div id="user-center" class="ui3-user-center-wrap" style="visibility: visible;">
					<div class="avatar-abstract" style="background-image: url(&quot;/static/images/857a6c6863626470616e47cf.jpg&quot;);">
					</div>
					<div class="info-box clearfix" style="display: none;">
						<div class="arrow">
						</div>
					</div>
				</div>
				<div id="message-center" class="has-message">
					<div class="message-center-entrance">
					</div>
					<div id="message-panel" class="">
						<div class="close-btn-indexpage" title="关闭">
							×
						</div>
					</div>
				</div>
				<div id="tool-container" class="toolscontainer">
					<div class="ui3-control-wrap clearfixs" id="ui3_control_wrap">
						<!-- <div class="cityData ui3-springfestival-data-wrap" id="ui3_springfestival_data">        <span class="ui3-springfestival-data-link"></span>    </div>-->
						
						<div class="citychangeopt ui3-city-change-wrap" id="ui3_city_change">
							<span class="adjustpadding">
							</span>
							<span class=" flex items-center justify-center" style="display: flex;" id="weather" title="天气">
								<img alt="图标" class=" w-4 h-4 " style="padding:0px;margin:0px;" src="/favicon.ico">
							</span>
							<a map-on-click="selectCity"
							@click="isShowSelectItem=!isShowSelectItem" class="ui3-city-change-inner ui3-control-shadow">
								<span>{{pageType}}</span>
								<em></em>
							</a>

							<div v-if="isShowSelectItem" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 34.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 101px;">
									<div @click="setSelectItem(selItem)" class="ui3-suggest-item" v-for="selItem in allSelectItems" :key="selItem"><a>
										<!-- <i class="default">{{selItem}}</i> -->
										<i class="el-icon-search " style="padding-left:5px;" ><span class=" ml-2">{{selItem}}</span></i>
										</a></div> 
								</div>
							</div>
						</div>
						
						<div class="left float-l">
							<b class="tool-gap"></b>
							<div class="trafficopt" map-on-click="traffic">
								<span id="traffic_control" class="last traffic"></span>
								<i>路况</i>
							</div>
							<b></b>
							<div class="boxopt" map-on-click="box" @click="{
								showToolsBox=!showToolsBox;
								isMarkActive=false;
								if (showLuxian){
								showLuxian=false;
								startGhLuxian.address='';
  								endGhLuxian.address='';
								}
								}">
								<span id="util_control" class="boxutils boxicon" :class="showToolsBox ? 'active':''"></span>
								<i class="boxtext" :class="showToolsBox ? 'active':''">工具箱</i>
								<em></em>
							</div>
<!--工具箱打开 part start-->							
							<div v-if="showToolsBox" class="detail-box" style="display: block;width:105px" >
								<ul id="boxul" class="boxinfo">
									<li class="map-measure" map-on-click="measure" @click="clickSubTools($event)">
										<span class="last measure"></span>
										<i>路线区域</i>
									</li>
									<li class="map-mark" map-on-click="mark" @click="clickSubTools($event)">
										<span class="last mark" :class="isMarkActive ? 'active':''"></span>
										<i :class="isMarkActive ? 'active':''">标记地点</i>
									</li>
									<!--
									<li class="map-share" map-on-click="share">
										<span class="last share"></span>
										<i>分享</i>
									</li>
									-->
								</ul>
							</div>
<!--工具箱打开part end-->
							
						</div>
					</div>
				</div>
			</div>
			<!--
			<div id="echartsMap" style="height: 100%" map-on-click="emap"  @click="onClickMap(event)" @dblclick="onDblClickMap(event)"></div>
			-->
			<div id="echartsMap" style="height: 100%"></div>
		</div>
		<!--  -->
		<el-dialog ref="elssdymapDialog" :title="dialogStatus == 'create' ? '创建' : '编辑'" v-model="dialogFormVisible" customClass="customWidth">
			<el-form ref="dataForm" :rules="rules" :model="tempArticleModel" label-position="left" label-width="60px" style="width: 350px">
				<!--
		        <el-form-item
		          :label="t('message.layout.author')"
		          prop="type"
		        >
		          <el-select
		            v-model="tempArticleModel.type"
		            class="filter-item"
		            placeholder="请选择"
		          >
		            <el-option
		              v-for="item in calendarTypeOptions"
		              :key="item.key"
		              :label="item.displayName"
		              :value="item.key"
		            />
		          </el-select>
		        </el-form-item>
		        -->
				<el-form-item :label="t('message.layout.title')" prop="title">
					<el-input v-model="tempArticleModel.title" placeholder="名称为唯一标示,必须与已有不同" />
				</el-form-item>
				<el-row style="margin-bottom: 20px">
					<el-col :span="12">
						<el-form-item label="联系" prop="reviewer">
							<el-input v-model="tempArticleModel.reviewer" placeholder="填写" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item :label="t('message.layout.phone')" prop="timestamp">
							<el-input v-model="tempArticleModel.timestamp" placeholder="填写" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row style="margin-bottom: 20px">
					<el-col :span="12">
						<el-form-item label="区域" prop="status">
							<el-select v-model="tempArticleModel.status" class="filter-item" placeholder="请选择">
								<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item :label="t('message.layout.location')" prop="pageviews">
							<el-input v-model="tempArticleModel.pageviews" />
						</el-form-item>
					</el-col>
				</el-row>
				<!--
		        <el-form-item :label="t('message.layout.managementUnit')">
		          <el-select
		            v-model="tempArticleModel.author"
		            class="filter-item"
		            placeholder="请选择"
		          >
		            <el-option
		              v-for="item in importanceOptions"
		              :key="item"
		              :label="item"
		              :value="item"
		            />
		          </el-select>
		        </el-form-item>
		        -->

				<el-form-item label="备注" prop="fullContent">
					<el-input v-model="tempArticleModel.fullContent" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder=" 信息" />
				</el-form-item>
			</el-form>

			<div class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ t('message.layout.cancel') }}
				</el-button>
				<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
					{{ t('message.layout.confirm') }}
				</el-button>
				<el-button type="primary" @click="handleDelete()">
					{{ t('message.layout.delete') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { onUnmounted, toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, ref, unref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import '/@/assets/baidumaptools.css';
import '/@/assets/baidupage.css';
import { useStore } from '/@/store/index';
import { echartsMapList, echartsMapData } from './mock';
import { createArticle, deleteArticleByName, updateArticle, defaultArticleModel, ArticleType, getArticles } from '/@/request/articles';
import { ElForm, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { cloneDeep, last } from 'lodash';
import { useRouter } from 'vue-router';
import _default from 'vuex';
import Assert from '/@/utils/shf/Assert';
export default {
	name: 'ssdyMap',
	components: {},
	setup() {
		const { t } = useI18n();
		const store = useStore();
		const { proxy } = getCurrentInstance();
		const router = useRouter();

		const lastPnt = {x:0,y:0};

		const dataForm = ref(ElForm);
		const state = reactive({
			uptDelContext: {},
			isShowSelectItem: false,
			allSelectItems: ['集结点', '疏散路线', '疏散地域', '隐蔽地域', '警报点'],
			dialogStatus: '',
			rules: {
				title: [{ required: true, message: 'title is required', trigger: 'blur' }],
				status: [{ required: true, message: 'area is required', trigger: 'change' }],
			},
			statusOptions: ['市人防', '市防疫', '区人防'],
			tempArticleModel: defaultArticleModel,
			dialogFormVisible: false,
			pageType: proxy.$route.query.type,
			pageName: proxy.$route.query.name,
			echartsMapList,
			echartsMapData,
			curRouteIndex: 'bus',
			showLuxian: false,
			showToolsBox: false,
			isMarkActive: false,
			isShouhuiActive: false,
			searchContent: {
				address: '',
				longitude: 0.0,
				latitude: 0.0,
			},
			isSetsearchContent: false,
			isSetqizhongContent: false,
			startGhLuxian: {
				address: '',
				longitude: 0.0,
				latitude: 0.0,
			},
			endGhLuxian: {
				address: '',
				longitude: 0.0,
				latitude: 0.0,
			},
			bmap: {},
			searchSugItems: [],
			isShowSearchSug: false,
			isShowQizhongSug: false,
			isStartLuxianFocus: false,
			isEndLuxianFocus: false,
			pagedata: {
				currentPage: 1,
				pageCount: 1000,
			},
			nullSugItem: {
				address: '警告!!无此POI数据',
				longitude: 0.0,
				latitude: 0.0,
			},
			curSearchPoint: {},
			curSearchMarker: {},

			startGhLuxianPoint: {},
			endGhLuxianPoint: {},
			ghLuxianPolyline: {},
			bmapPoints: [],
			bmapOverlays: [],
			getTblData: {},

			/////////////////集结点.etc//////////////
			jijieDian: [],
			baozhangDian: [],

			shusanLuxianData: [],
			luxianDian: [],
			currentLxDian: [],

			shusandiyuDian: [],
			currentSsdyDian: [],
			shusanDiyuData: [],

			yinbidiyuDian: [],
			currentYbdyDian: [],
			yinbiDiyuData: [],

			isMouseDown: false,
			myChart: {},
		});

		const dftSeriesLinesData = {
			name: 'tempLinesDataNameLhc',
			coords: [],
		};

		const dftSeriesScatterDataName = 'tempScatterDataNameLhc';
		/*
		watch((event)=>event.currentTarget.getAttribute('map-on-click'),(val)=>{
		});
*/
		watch(
			() => state.searchContent.address,
			async (val) => {
				if (state.isSetsearchContent) {
					state.isSetsearchContent = false;
				} else {
					if (val.length > 1) {
						state.pagedata.address = val;
						await getArticles(state.pagedata, ArticleType.MAPPOI).then((res) => {
							state.searchSugItems = [];
							for (let i = 0; res.data[i]; i++) {
								state.searchSugItems.push(res.data[i]);
							}
							if (state.searchSugItems.length == 0) {
								state.searchSugItems.push(state.nullSugItem);
							}
						});

						state.isShowSearchSug = true;
					} else {
						state.isShowSearchSug = false;
					}
				}
			}
		);

		watch(
			() => state.startGhLuxian.address,
			async (val) => {
				if (state.isSetqizhongContent) {
					state.isSetqizhongContent = false;
				} else {
					if (val.length > 1) {
						state.pagedata.address = val;
						await getArticles(state.pagedata, ArticleType.MAPPOI).then((res) => {
							state.searchSugItems = [];
							for (let i = 0; res.data[i]; i++) {
								state.searchSugItems.push(res.data[i]);
							}
							if (state.searchSugItems.length == 0) {
								state.searchSugItems.push(state.nullSugItem);
							}
						});
						state.isShowQizhongSug = true;
					} else {
						state.isShowQizhongSug = false;
						state.startGhLuxian.longitude = 0.0;
						state.startGhLuxian.latitude = 0.0;
						if (state.ghLuxianPolyline) {
							state.bmap.removeOverlay(state.ghLuxianPolyline);
							delete state.ghLuxianPolyline;
						}
					}
				}
			}
		);

		watch(
			() => state.endGhLuxian.address,
			async (val) => {
				if (state.isSetqizhongContent) {
					state.isSetqizhongContent = false;
					//start search
				} else {
					if (val.length > 1) {
						state.pagedata.address = val;
						await getArticles(state.pagedata, ArticleType.MAPPOI).then((res) => {
							state.searchSugItems = [];
							for (let i = 0; res.data[i]; i++) {
								state.searchSugItems.push(res.data[i]);
							}
							if (state.searchSugItems.length == 0) {
								state.searchSugItems.push(state.nullSugItem);
							}
						});
						state.isShowQizhongSug = true;
					} else {
						state.isShowQizhongSug = false;
						state.endGhLuxian.longitude = 0.0;
						state.endGhLuxian.latitude = 0.0;

						if (state.ghLuxianPolyline) {
							state.bmap.removeOverlay(state.ghLuxianPolyline);
							delete state.ghLuxianPolyline;
						}
					}
				}
			}
		);

		watch(
			() => state.dialogFormVisible,
			(val) => {
				if (!val) {
					if (state.dialogStatus == 'create') {
						let delDian = [];
						let delData = [];

						switch (state.pageType) {
							case '集结点':
								{
									for (let i = 0; i < state.jijieDian.length; i++) {
										let ele = state.jijieDian[i];
										if (ele.name == '') {
											delDian.push(i);
											break;
										}
									}
									let j = 0;
									delDian.forEach((ele) => {
										state.jijieDian.splice(ele - j, 1);
										j++;
									});
									if (j) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: state.pageType,
													data: state.jijieDian,
												},
											],
										});
									}
								}
								break;
							case '警报点':
								{
									for (let i = 0; i < state.baozhangDian.length; i++) {
										let ele = state.baozhangDian[i];
										if (ele.name == '') {
											delDian.push(i);
											break;
										}
									}
									let j = 0;
									delDian.forEach((ele) => {
										state.baozhangDian.splice(ele - j, 1);
										j++;
									});
									if (j) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: state.pageType,
													data: state.baozhangDian,
												},
											],
										});
									}
								}
								break;
							case '疏散路线':
								{
									//路线点
									delDian = [];
									for (let i = 0; i < state.luxianDian.length; i++) {
										let ele = state.luxianDian[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
										}
									}
									let j = 0;
									delDian.forEach((ele) => {
										state.luxianDian.splice(ele - j, 1);
										j++;
									});
									if (j) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: '路线点',
													data: state.luxianDian,
												},
											],
										});
									}
									//路线
									delDian = [];
									for (let i = 0; i < state.shusanLuxianData.length; i++) {
										let ele = state.shusanLuxianData[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
											break;
										}
									}
									let k = 0;
									delDian.forEach((ele) => {
										state.shusanLuxianData.splice(ele - k, 1);
										k++;
									});
									if (k) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: state.pageType,
													data: state.shusanLuxianData,
												},
											],
										});
									}
								}
								break;
							case '疏散地域':
								{
									//地域点
									delDian = [];
									for (let i = 0; i < state.shusandiyuDian.length; i++) {
										let ele = state.shusandiyuDian[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
										}
									}
									let j = 0;
									delDian.forEach((ele) => {
										state.shusandiyuDian.splice(ele - j, 1);
										j++;
									});
									if (j) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: '疏散地域点',
													data: state.shusandiyuDian,
												},
											],
										});
									}
									//地域
									delDian = [];
									for (let i = 0; i < state.shusanDiyuData.length; i++) {
										let ele = state.shusanDiyuData[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
											break;
										}
									}
									let k = 0;
									delDian.forEach((ele) => {
										state.shusanDiyuData.splice(ele - k, 1);
										k++;
									});
									if (k) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: state.pageType,
													data: state.shusanDiyuData,
												},
											],
										});
									}
								}
								break;
							case '隐蔽地域':
								{
									//地域点
									delDian = [];
									for (let i = 0; i < state.yinbidiyuDian.length; i++) {
										let ele = state.yinbidiyuDian[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
										}
									}
									let j = 0;
									delDian.forEach((ele) => {
										state.yinbidiyuDian.splice(ele - j, 1);
										j++;
									});
									if (j) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: '隐蔽地域点',
													data: state.yinbidiyuDian,
												},
											],
										});
									}
									//地域
									delDian = [];
									for (let i = 0; i < state.yinbiDiyuData.length; i++) {
										let ele = state.yinbiDiyuData[i];
										if (ele.name == dftSeriesLinesData.name) {
											delDian.push(i);
											break;
										}
									}
									let k = 0;
									delDian.forEach((ele) => {
										state.yinbiDiyuData.splice(ele - k, 1);
										k++;
									});
									if (k) {
										state.myChart.setOption({
											series: [
												{
													// 根据名字对应到相应的系列
													name: state.pageType,
													data: state.yinbiDiyuData,
												},
											],
										});
									}
								}
								break;
						}
					}
				}
			}
		);

		const setSelectItem = (selItem) => {
			state.isShowSelectItem = false;
			let str = '/menu/menu1/menu12/menu121';

			switch (selItem) {
				case '集结点':
					{
						str = '/menu/menu1/menu12/menu121';
					}
					break;
				case '疏散路线':
					{
						str = '/menu/menu1/menu12/menu122';
					}
					break;
				case '疏散地域':
					{
						str = '/menu/menu1/menu12/menu123';
					}
					break;
				case '隐蔽地域':
					{
						str = '/menu/menu1/menu12/menu124';
					}
					break;
				case '警报点':
					{
						str = '/menu/menu1/menu12/menu125';
					}
					break;
				case '经济目标':
					{
						str = '/menu/menu1/menu12/menu126';
					}
					break;
			}

			router.push({
				path: str,
				query: { type: selItem, name: '' },
			});
		};

		const searchBoxFocus = () => {
			if (state.showLuxian) state.showLuxian = false;
			if (state.showToolsBox) state.showToolsBox = false;
		};

		const startGhLuxianFocus = () => {
			state.isStartLuxianFocus = true;
			state.isEndLuxianFocus = false;
		};

		const endGhLuxianFocus = () => {
			state.isStartLuxianFocus = false;
			state.isEndLuxianFocus = true;
		};

		const setSearchInput = (sugItem) => {
			state.isShowSearchSug = false;

			if (sugItem.longitude != 0.0) {
				state.isSetsearchContent = true;
				state.searchContent = sugItem;

				state.curSearchPoint.lng = sugItem.longitude;
				state.curSearchPoint.lat = sugItem.latitude;
				state.bmap.centerAndZoom(state.curSearchPoint, 19);

				// 创建标注
				state.curSearchMarker.point = state.curSearchPoint;
				state.bmap.addOverlay(state.curSearchMarker);
			}
		};

		const closeSearchContent = () => {
			state.searchContent.address = '';
			state.searchContent.longitude = state.searchContent.latitude = 0.0;
			state.bmap.removeOverlay(state.curSearchMarker);
		};

		const setQizhongdianInput = (sugItem) => {
			state.isSetqizhongContent = true;
			state.isShowQizhongSug = false;

			if (state.isStartLuxianFocus) {
				if (sugItem.longitude != 0.0) {
					state.startGhLuxian = sugItem;
					//start search
					if (state.endGhLuxian.longitude != 0.0) {
						state.startGhLuxianPoint.lng = sugItem.longitude;
						state.startGhLuxianPoint.lat = sugItem.latitude;
						state.endGhLuxianPoint.lng = state.endGhLuxian.longitude;
						state.endGhLuxianPoint.lat = state.endGhLuxian.latitude;

						var polyline = new BMap.Polyline([state.startGhLuxianPoint, state.endGhLuxianPoint], {
							strokeColor: 'red',
							strokeWeight: 6,
							strokeOpacity: 0.5,
						});
						state.ghLuxianPolyline = polyline;
						state.bmap.addOverlay(polyline);
						/*
			  			state.ghLuxianPolyline=BMap.Polyline([
			  			state.startGhLuxianPoint,state.endGhLuxianPoint],
			  			{strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
			  			state.bmap.addOverlay(state.ghLuxianPolyline);*/
					}
				}
			} else if (state.isEndLuxianFocus) {
				if (sugItem.longitude != 0.0) {
					state.endGhLuxian = sugItem;
					//start search
					if (state.startGhLuxian.longitude != 0.0) {
						state.startGhLuxianPoint.lng = state.startGhLuxian.longitude;
						state.startGhLuxianPoint.lat = state.startGhLuxian.latitude;
						state.endGhLuxianPoint.lng = sugItem.longitude;
						state.endGhLuxianPoint.lat = sugItem.latitude;

						var polyline = new BMap.Polyline([state.startGhLuxianPoint, state.endGhLuxianPoint], {
							strokeColor: 'red',
							strokeWeight: 6,
							strokeOpacity: 0.5,
						});
						state.ghLuxianPolyline = polyline;
						state.bmap.addOverlay(polyline);

						/*
			  			state.ghLuxianPolyline=BMap.Polyline([
			  			state.startGhLuxianPoint,state.endGhLuxianPoint],
			  			{strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
			  			state.bmap.addOverlay(state.ghLuxianPolyline);*/
					}
				}
			}

			//start to
		};

		const clickGhLuxian = () => {
			state.showLuxian = !state.showLuxian;

			if (state.showLuxian) {
				state.endGhLuxian.address = '';
				state.startGhLuxian.address = '';
				state.isShowSearchSug = false;
				if (state.showToolsBox) {
					state.showToolsBox = false;
					state.isMarkActive = false;
					state.isShouhuiActive = false;
				}
			} else {
				state.startGhLuxian.address = state.endGhLuxian.address = '';
			}

			//start luxian
		};

		const changeRouteIndex = (event) => {
			state.curRouteIndex = event.currentTarget.getAttribute('data-index');
		};

		const searchAddr = () => {
		};

		const clickSubTools = (event) => {
			let curTool = event.currentTarget.getAttribute('map-on-click');
			if (curTool == 'measure') {
				state.showToolsBox = false;
				//鼠标样式，想结束则双击，start 手绘
				state.isShouhuiActive = true;
				state.isMarkActive = false;
				state.bmap.disableDoubleClickZoom();
			} else if (curTool == 'mark') {
				state.isMarkActive = !state.isMarkActive;
				//鼠标样式，start 标记，标记一次，active=false，需要重新点击标记
				if (state.isMarkActive) {
					if (state.isShouhuiActive) {
						state.isShouhuiActive = false;
						state.bmap.enableDoubleClickZoom();
					}
				}
			}
		};

		const loadTypeName = async () => {
			state.pagedata.importance = state.pageType;
			//if (state.pageName!='') state.pagedata.title=state.pageName;
			for (let i = 0; i < state.allSelectItems.length; i++) {
				if (state.allSelectItems[i] == state.pageType) {
					state.allSelectItems.splice(i, 1);
					break;
				}
			}
			state.getTblData = {};
			await getArticles(state.pagedata, ArticleType.SSYS).then((res) => {
				state.getTblData = res;
			});

			let point = new BMap.Point(window['gLongitudeVal'], window['gLatitudeVal']);
			if (state.getTblData.total > 0) {
				switch (state.pageType) {
					case '集结点':
						{
							state.getTblData.data.forEach((ele) => {
								if (ele.title == state.pageName) {
									point.lng = ele.sourceURL;
									point.lat = ele.imageURL;
								}
								state.jijieDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL],
								});
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.jijieDian,
										},
									],
								});
							});
						}
						break;

					case '疏散路线':
						{
							let nameArr = [];
							//路线点
							state.getTblData.data.forEach((ele) => {
								if (nameArr.indexOf(ele.title) == -1) {
									nameArr.push(ele.title);
									state.luxianDian.push({
										name: ele.title,
										value: [ele.sourceURL, ele.imageURL],
										label: { show: true },
									});
								} else {
									state.luxianDian.push({
										name: ele.title,
										value: [ele.sourceURL, ele.imageURL],
									});
								}
								if (ele.title == state.pageName) {
									point.lng = ele.sourceURL;
									point.lat = ele.imageURL;
								}

								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '路线点',
											data: state.luxianDian,
										},
									],
								});
							});
							//路线
							let cnt = 0;
							nameArr.forEach((nameEle) => {
								let j = 0,
									idx = 0;
								state.getTblData.data.forEach((ele) => {
									if (nameEle == ele.title) {
										if (!j) {
											idx =
												state.shusanLuxianData.push({
													name: nameEle,
													coords: [[ele.sourceURL, ele.imageURL]],
												}) - 1;
										} else {
											state.shusanLuxianData[idx].coords.push([ele.sourceURL, ele.imageURL]);
										}
										j++;
									}
								});
								cnt += j;
							});

							if (cnt) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.shusanLuxianData,
										},
									],
								});
							}
						}
						break;

					case '疏散地域':
						{
							let nameArr = [];
							let cnt = 0;
							//疏散地域点
							state.getTblData.data.forEach((ele) => {
								if (nameArr.indexOf(ele.title) == -1) {
									nameArr.push(ele.title);
									state.shusandiyuDian.push({
										name: ele.title,
										value: [ele.sourceURL, ele.imageURL, undefined],
									});
									cnt++;
								}
								if (state.pageName == '' || ele.title == state.pageName) {
									point.lng = ele.sourceURL;
									point.lat = ele.imageURL;
								}
							});
							if (cnt) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '疏散地域点',
											data: state.shusandiyuDian,
										},
									],
								});
							}

							//疏散地域
							cnt = 0;
							nameArr.forEach((nameEle) => {
								let j = 0,
									idx = 0;
								let startp = [];
								let endp = [];
								state.getTblData.data.forEach((ele) => {
									if (nameEle == ele.title) {
										if (!j) {
											startp = [ele.sourceURL, ele.imageURL];
											idx =
												state.shusanDiyuData.push({
													name: nameEle,
													coords: [startp],
												}) - 1;
										} else {
											endp = [ele.sourceURL, ele.imageURL];
										}
										j++;
									}
								});
								if (startp.length > 0 && endp.length > 0) {
									state.shusanDiyuData[idx].coords.push([endp[0], startp[1]], endp, [startp[0], endp[1]], startp);
								}
								cnt += j;
							});

							if (cnt) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.shusanDiyuData,
										},
									],
								});
							}
						}
						break;

					case '隐蔽地域':
						{
							let nameArr = [];
							let cnt = 0;
							//疏散地域点
							state.getTblData.data.forEach((ele) => {
								if (nameArr.indexOf(ele.title) == -1) {
									nameArr.push(ele.title);
									state.yinbidiyuDian.push({
										name: ele.title,
										value: [ele.sourceURL, ele.imageURL],
									});
									cnt++;
								}
								if (ele.title == state.pageName) {
									point.lng = ele.sourceURL;
									point.lat = ele.imageURL;
								}
							});
							if (cnt) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '隐蔽地域点',
											data: state.yinbidiyuDian,
										},
									],
								});
							}

							//疏散地域
							cnt = 0;
							nameArr.forEach((nameEle) => {
								let j = 0,
									idx = 0;
								let startp = [];
								let endp = [];
								state.getTblData.data.forEach((ele) => {
									if (nameEle == ele.title) {
										if (!j) {
											startp = [ele.sourceURL, ele.imageURL];
											idx =
												state.yinbiDiyuData.push({
													name: nameEle,
													coords: [startp],
												}) - 1;
										} else {
											endp = [ele.sourceURL, ele.imageURL];
										}
										j++;
									}
								});
								if (startp.length > 0 && endp.length > 0) {
									state.yinbiDiyuData[idx].coords.push([endp[0], startp[1]], endp, [startp[0], endp[1]], startp);
								}
								cnt += j;
							});

							if (cnt) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.yinbiDiyuData,
										},
									],
								});
							}
						}
						break;

					case '警报点':
						{
							state.getTblData.data.forEach((ele) => {
								if (ele.title == state.pageName) {
									point.lng = ele.sourceURL;
									point.lat = ele.imageURL;
								}
								state.baozhangDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL],
								});
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.baozhangDian,
										},
									],
								});
							});
						}
						break;

					default:
						{
						}
						break;
				}
			}
			state.bmap.centerAndZoom(point, 19);
		};

		const resetTempArticleModel = () => {
			state.tempArticleModel = cloneDeep(defaultArticleModel);
			state.tempArticleModel.importance = state.pageType;
			state.dialogStatus = 'create';
			/*
        	nextTick(() => {
	          (dataForm.value as typeof ElForm).clearValidate();
	        });
	        */
		};

		const editDialogShowByLoc = (offsetx, offsety) => {
			let el = proxy.$refs.elssdymapDialog;
			if (el) {
				let locx, locy;
				if (offsetx > 1120) locx = 1170;
				else locx = offsetx + 50;
				el.style.left = locx + 'px';

				if (offsety > 300) locy = offsety - 300;
				else locy = offsety + 70;
				el.style.top = locy + 'px';

				ElMessage.success(offsetx + ',' + offsety);
				state.dialogFormVisible = true;
			}
		};

		const createData = async () => {
			//const form = unref(dataForm);
			let ArticleModel = state.tempArticleModel;
			let ret = 0;
			let upt = 0;
			let idx = 0;
			if (ArticleModel.title.length > 0 && ArticleModel.status.length > 0) {
				if (state.pageType == '集结点') {
					ret = 0;
					upt = 0;
					idx = 0;
					for (let i = 0; i < state.jijieDian.length; i++) {
						let ele = state.jijieDian[i];
						if (ele.name == '') {
							ArticleModel.sourceURL = ele.value[0];
							ArticleModel.imageURL = ele.value[1];
							ret++;
							idx = i;
							break;
						}
					}
					if (ret) {
						await createArticle(ArticleModel, ArticleType.SSYS)
							.then(async () => {
								ElMessage.success('添加成功');
								state.dialogFormVisible = false;
								state.dialogStatus = 'success';
								state.jijieDian[idx].name = ArticleModel.title;
								upt++;
							})
							.catch((err) => {
								ElMessage.warning('添加错误');
							});

						if (upt) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: state.pageType,
										data: state.jijieDian,
									},
								],
							});
						}
					}
				} else if (state.pageType == '警报点') {
					ret = 0;
					upt = 0;
					idx = 0;
					for (let i = 0; i < state.baozhangDian.length; i++) {
						let ele = state.baozhangDian[i];
						if (ele.name == '') {
							ArticleModel.sourceURL = ele.value[0];
							ArticleModel.imageURL = ele.value[1];
							ret++;
							idx = i;
							break;
						}
					}
					if (ret) {
						await createArticle(ArticleModel, ArticleType.SSYS)
							.then(async () => {
								ElMessage.success('添加成功');
								state.dialogFormVisible = false;
								state.dialogStatus = 'success';
								state.baozhangDian[idx].name = ArticleModel.title;
								upt++;
							})
							.catch((err) => {
								ElMessage.warning('添加错误');
							});

						if (upt) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: state.pageType,
										data: state.baozhangDian,
									},
								],
							});
						}
					}
				} else if (state.pageType == '疏散路线') {
					ret = 0;
					upt = 0;
					idx = 0;
					for (let i = 0; i < state.luxianDian.length; i++) {
						let ele = state.luxianDian[i];
						if (ele.name == dftSeriesLinesData.name) {
							ArticleModel.sourceURL = ele.value[0];
							ArticleModel.imageURL = ele.value[1];
							await createArticle(ArticleModel, ArticleType.SSYS)
								.then(async () => {
									//ElMessage.success('添加成功')
									state.dialogFormVisible = false;
									state.dialogStatus = 'success';
									state.luxianDian[i].name = ArticleModel.title;
									upt++;
								})
								.catch((err) => {
									//ElMessage.warning('添加错误');
								});
						}
					}

					if (upt) {
						ElMessage.success('添加成功');
						state.myChart.setOption({
							series: [
								{
									// 根据名字对应到相应的系列
									name: '路线点',
									data: state.luxianDian,
								},
							],
						});

						ret = 0;
						for (let i = 0; i < state.shusanLuxianData.length; i++) {
							let ele = state.shusanLuxianData[i];
							if (ele.name == dftSeriesLinesData.name) {
								state.shusanLuxianData[i].name = ArticleModel.title;
								ret++;
								break;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: state.pageType,
										data: state.shusanLuxianData,
									},
								],
							});
						}
					} else ElMessage.warning('添加错误');
				} else if (state.pageType == '疏散地域') {
					ret = 0;
					upt = 0;
					idx = 0;
					let createCount = 0;
					for (let i = 0; i < state.shusanDiyuData.length; i++) {
						let ele = state.shusanDiyuData[i];
						if (ele.name == dftSeriesLinesData.name) {
							//ele.coords
							for (let j = 0; j < 4; j += 2) {
								let parr = ele.coords[j];
								ArticleModel.sourceURL = parr[0];
								ArticleModel.imageURL = parr[1];
								let res = await createArticle(ArticleModel,ArticleType.SSYS,createCount==0?true:false);
								if(!res)
								{
									state.dialogFormVisible = false;
									state.dialogStatus = 'success';
									state.shusanDiyuData[i].name = ArticleModel.title;
									upt++;
									createCount++;
									continue;
								}
								Assert.isFalse(true,res+"");
								return;
							}
							break;
						}
					}

					if (upt) {
						ElMessage.success('添加成功');
						state.myChart.setOption({
							series: [
								{
									// 根据名字对应到相应的系列
									name: state.pageType,
									data: state.shusanDiyuData,
								},
							],
						});
						ret = 0;
						for (let i = 0; i < state.shusandiyuDian.length; i++) {
							let ele = state.shusandiyuDian[i];
							if (ele.name == dftSeriesLinesData.name) {
								state.shusandiyuDian[i].name = ArticleModel.title;
								ret++;
								break;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '疏散地域点',
										data: state.shusandiyuDian,
									},
								],
							});
						}
					} else ElMessage.warning('添加错误');
				} else if (state.pageType == '隐蔽地域') {
					ret = 0;
					upt = 0;
					idx = 0;
					for (let i = 0; i < state.yinbiDiyuData.length; i++) {
						let ele = state.yinbiDiyuData[i];
						if (ele.name == dftSeriesLinesData.name) {
							//ele.coords
							for (let j = 0; j < 4; j += 2) {
								let parr = ele.coords[j];
								ArticleModel.sourceURL = parr[0];
								ArticleModel.imageURL = parr[1];
								await createArticle(ArticleModel, ArticleType.SSYS)
									.then(async () => {
										//ElMessage.success('添加成功')
										state.dialogFormVisible = false;
										state.dialogStatus = 'success';
										state.yinbiDiyuData[i].name = ArticleModel.title;
										upt++;
									})
									.catch((err) => {
										//ElMessage.warning('添加错误');
									});
							}
							break;
						}
					}

					if (upt) {
						ElMessage.success('添加成功');
						state.myChart.setOption({
							series: [
								{
									// 根据名字对应到相应的系列
									name: state.pageType,
									data: state.yinbiDiyuData,
								},
							],
						});
						ret = 0;
						for (let i = 0; i < state.yinbidiyuDian.length; i++) {
							let ele = state.yinbidiyuDian[i];
							if (ele.name == dftSeriesLinesData.name) {
								state.yinbidiyuDian[i].name = ArticleModel.title;
								ret++;
								break;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '隐蔽地域点',
										data: state.yinbidiyuDian,
									},
								],
							});
						}
					} else ElMessage.warning('添加错误');
				}
				await getArticles(state.pagedata, ArticleType.SSYS).then((res) => {
					state.getTblData = res;
				});
			} else ElMessage.error('请填写必填参数');

			/*form.validate(async(valid: any) => {
	          if (valid) {
	          	
	            const ArticleModel = dataMap.tempArticleModel
	            //ArticleModel.id = Math.round(Math.random() * 100) + 1024 // mock a id
	            //ArticleModel.author = 'RCYJ_Scy'
	            const addData=await createArticle(ArticleModel,ArticleType.ZBWZ).then(async() => {
			        ElMessage.success('添加成功')
			        dataMap.dialogFormVisible = false
			        const data = await getArticles(dataMap.listQuery,ArticleType.ZBWZ)
			        //const data=zhihuiJigouJson        
			        dataMap.list = data?.data ?? []
			        dataMap.total = data?.total ?? 0
			      }).catch(err => {
			      ElMessage.warning('添加错误')
			     });
	          }
	        });*/
		};

		const compObject = (a, b) => {
			//取对象a和b的属性名
			let aProps = Object.getOwnPropertyNames(a);
			let bProps = Object.getOwnPropertyNames(b);
			//判断属性名的length是否一致
			if (aProps.length != bProps.length) {
				return false;
			}
			//循环取出属性名，再判断属性值是否一致
			for (let i = 0; i < aProps.length; i++) {
				let propName = aProps[i];
				if (a[propName] !== b[propName]) {
					return false;
				}
			}
			return true;
		};

		const updateData = async () => {
			let e = state.uptDelContext;
			let idxArr = [];
			let equal = false;
			let oncecomp = false;
			let uptecharts = false;
			let i = 0;
			let ret = true;
			for (i = 0; i < state.getTblData.data.length; i++) {
				let ele = state.getTblData.data[i];
				if (ele.title == e.name) {
					state.tempArticleModel.id = ele.id;
					if (!oncecomp) {
						oncecomp = true;
						equal = compObject(state.tempArticleModel, ele);
					}
					if (!equal) {
						if (state.tempArticleModel.title != ele.title) uptecharts = true;
						state.tempArticleModel.sourceURL = '';
						state.tempArticleModel.imageURL = '';
						let res = await updateArticle(state.tempArticleModel, ArticleType.SSYS);
						if(res)
						{
							Assert.isFalse(true,res+"");
						}
							
				}
			}
			state.dialogFormVisible = false;
			if (!ret) {
				ElMessage.warning('更新失败');
				return;
			}

			ElMessage.success('更新成功');
			await getArticles(state.pagedata, ArticleType.SSYS).then((res) => {
				state.getTblData = res;
			});

			if (!uptecharts) return;

			switch (e.seriesName) {
				case '集结点':
					{
						ret = false;
						for (let i = 0; i < state.jijieDian.length; i++) {
							let ele = state.jijieDian[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
								break;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: e.seriesName,
										data: state.jijieDian,
									},
								],
							});
						}
					}
					break;

				case '警报点':
					{
						ret = false;
						for (let i = 0; i < state.baozhangDian.length; i++) {
							let ele = state.baozhangDian[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
								break;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: e.seriesName,
										data: state.baozhangDian,
									},
								],
							});
						}
					}
					break;

				case '路线点':
				case '疏散路线':
					{
						//路线点
						ret = false;
						for (let i = 0; i < state.luxianDian.length; i++) {
							let ele = state.luxianDian[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '路线点',
										data: state.luxianDian,
									},
								],
							});
						}
						//路线
						ret = false;
						for (let i = 0; i < state.shusanLuxianData.length; i++) {
							let ele = state.shusanLuxianData[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '疏散路线',
										data: state.shusanLuxianData,
									},
								],
							});
						}
					}

					break;

				case '疏散地域点':
				case '疏散地域':
					{
						//路线点
						ret = false;
						for (let i = 0; i < state.shusandiyuDian.length; i++) {
							let ele = state.shusandiyuDian[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '疏散地域点',
										data: state.shusandiyuDian,
									},
								],
							});
						}
						//路线
						ret = false;
						for (let i = 0; i < state.shusanDiyuData.length; i++) {
							let ele = state.shusanDiyuData[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '疏散地域',
										data: state.shusanDiyuData,
									},
								],
							});
						}
					}
					break;

				case '隐蔽地域点':
				case '隐蔽地域':
					{
						//路线点
						ret = false;
						for (let i = 0; i < state.yinbidiyuDian.length; i++) {
							let ele = state.yinbidiyuDian[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '隐蔽地域点',
										data: state.yinbidiyuDian,
									},
								],
							});
						}
						//路线
						ret = false;
						for (let i = 0; i < state.yinbiDiyuData.length; i++) {
							let ele = state.yinbiDiyuData[i];
							if (ele.name == e.name) {
								ele.name = state.tempArticleModel.title;
								ret = true;
							}
						}
						if (ret) {
							state.myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '隐蔽地域',
										data: state.yinbiDiyuData,
									},
								],
							});
						}
					}
					break;
			}
		};

		const handleDelete = async () => {
			if (state.dialogStatus == 'create') {
				state.dialogFormVisible = false;
			} else {
				let e = state.uptDelContext;
				let ret = false;
				await deleteArticleByName(e.name, ArticleType.SSYS)
					.then(() => {
						ElMessage.success({
							message: '删除成功',
							type: 'success',
							duration: 2000,
						});
						ret = true;
					})
					.catch((err) => {
						ElMessage.warning('删除失败');
					});

				state.dialogFormVisible = false;
				if (!ret) return;

				let i;
				let delDian = [];
				switch (e.seriesName) {
					case '集结点':
						{
							for (i = 0; i < state.jijieDian.length; i++) {
								let ele = state.jijieDian[i];
								if (ele.name == e.name) {
									break;
								}
							}
							if (i != state.jijieDian.length) {
								state.jijieDian.splice(i, 1);
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: e.seriesName,
											data: state.jijieDian,
										},
									],
								});
							}
						}
						break;

					case '警报点':
						{
							for (i = 0; i < state.baozhangDian.length; i++) {
								let ele = state.baozhangDian[i];
								if (ele.name == e.name) {
									break;
								}
							}
							if (i != state.baozhangDian.length) {
								state.baozhangDian.splice(i, 1);
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: e.seriesName,
											data: state.baozhangDian,
										},
									],
								});
							}
						}
						break;

					case '路线点':
					case '疏散路线':
						{
							//路线点
							delDian = [];
							for (i = 0; i < state.luxianDian.length; i++) {
								let ele = state.luxianDian[i];
								if (ele.name == e.name) {
									delDian.push(i);
								}
							}
							let j = 0;
							delDian.forEach((ele) => {
								state.luxianDian.splice(ele - j, 1);
								j++;
							});
							if (j) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '路线点',
											data: state.luxianDian,
										},
									],
								});
							}
							//路线
							delDian = [];
							for (i = 0; i < state.shusanLuxianData.length; i++) {
								let ele = state.shusanLuxianData[i];
								if (ele.name == e.name) {
									delDian.push(i);
									break;
								}
							}
							let k = 0;
							delDian.forEach((ele) => {
								state.shusanLuxianData.splice(ele - k, 1);
								k++;
							});
							if (k) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.shusanLuxianData,
										},
									],
								});
							}
						}
						break;

					case '疏散地域点':
					case '疏散地域':
						{
							//地域点
							delDian = [];
							for (i = 0; i < state.shusandiyuDian.length; i++) {
								let ele = state.shusandiyuDian[i];
								if (ele.name == e.name) {
									delDian.push(i);
								}
							}
							let j = 0;
							delDian.forEach((ele) => {
								state.shusandiyuDian.splice(ele - j, 1);
								j++;
							});
							if (j) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '疏散地域点',
											data: state.shusandiyuDian,
										},
									],
								});
							}
							//地域
							delDian = [];
							for (i = 0; i < state.shusanDiyuData.length; i++) {
								let ele = state.shusanDiyuData[i];
								if (ele.name == e.name) {
									delDian.push(i);
									break;
								}
							}
							let k = 0;
							delDian.forEach((ele) => {
								state.shusanDiyuData.splice(ele - k, 1);
								k++;
							});
							if (k) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.shusanDiyuData,
										},
									],
								});
							}
						}
						break;

					case '隐蔽地域点':
					case '隐蔽地域':
						{
							//地域点
							delDian = [];
							for (i = 0; i < state.yinbidiyuDian.length; i++) {
								let ele = state.yinbidiyuDian[i];
								if (ele.name == e.name) {
									delDian.push(i);
								}
							}
							let j = 0;
							delDian.forEach((ele) => {
								state.yinbidiyuDian.splice(ele - j, 1);
								j++;
							});
							if (j) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: '隐蔽地域点',
											data: state.yinbidiyuDian,
										},
									],
								});
							}
							//地域
							delDian = [];
							for (i = 0; i < state.yinbiDiyuData.length; i++) {
								let ele = state.yinbiDiyuData[i];
								if (ele.name == e.name) {
									delDian.push(i);
									break;
								}
							}
							let k = 0;
							delDian.forEach((ele) => {
								state.yinbiDiyuData.splice(ele - k, 1);
								k++;
							});
							if (k) {
								state.myChart.setOption({
									series: [
										{
											// 根据名字对应到相应的系列
											name: state.pageType,
											data: state.yinbiDiyuData,
										},
									],
								});
							}
						}
						break;
				}
			}
		};

		// 设置主内容的高度
		const initTagViewHeight = computed(() => {
			let { isTagsview } = store.state.themeConfig.themeConfig;
			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
			if (isTagsViewCurrenFull) {
				return `30px`;
			} else {
				if (isTagsview) return `114px`;
				else return `80px`;
			}
		});
		// echartsMap 将坐标信息和对应物理量的值合在一起
		const convertData = (data) => {
			let res = [];
			for (let i = 0; i < data.length; i++) {
				let geoCoord = state.echartsMapData[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
					});
				}
			}
			return res;
		};

		// 初始化 echartsMap
		const initEchartsMap = () => {
			const myChart = echarts.init(document.getElementById('echartsMap'), 'light');
			state.myChart = myChart;

			const option = {
				tooltip: {
					trigger: 'item',
				},
				color: ['#FF0000', '#ea7ccc'],
				bmap: {
					center: [window['gLongitudeVal'], window['gLatitudeVal']],
					zoom: 19,
					roam: true,
					mapStyle: {},
				},
				series: [
					{
						name: '集结点',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: state.jijieDian,
						symbol: 'image://static/images/jijie.png',
						symbolSize: 40,
						encode: {
							value: 2,
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color: '#ff0000',
							fontSize: 14,
						},
					},
					{
						name: '警报点',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: state.baozhangDian,
						symbol: 'image://static/images/baozhang.png',
						symbolSize: 40,
						encode: {
							value: 2,
						},

						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color: '#ff0000',
							fontSize: 14,
						},
					},
					{
						name: '路线点',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: state.luxianDian,
						symbol: 'image://static/images/end_e68ad9a.png',
						symbolSize: 10,
						encode: {
							value: 2,
						},
						label: {
							formatter: '{b}',
							//position: 'right',
							position: 'top',
							show: false,
							color: '#ff0000',
							fontSize: 14,
						},
					},
					{
						name: '疏散地域点',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: state.shusandiyuDian,
						symbol: 'image://static/images/shusan.png',
						symbolSize: 30,
						encode: {
							value: 2,
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color: '#ff0000',
							fontSize: 14,
						},
					},
					{
						name: '隐蔽地域点',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: state.yinbidiyuDian,
						symbol: 'image://static/images/yinbi.png',
						symbolSize: 30,
						encode: {
							value: 2,
						},

						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color: '#ff0000',
							fontSize: 14,
						},
					},
					{
						name: '疏散路线',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline: true,
						// 统一的样式设置
						lineStyle: {
							color: '#00ff00',
							opacity: 0.8,
							width: 10,
						},
						data: state.shusanLuxianData,
					},
					{
						name: '疏散地域',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline: true,
						// 统一的样式设置
						lineStyle: {
							color: '#0000ff',
							opacity: 0.6,
							width: 15,
						},
						data: state.shusanDiyuData,
					},
					{
						name: '隐蔽地域',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline: true,
						// 统一的样式设置
						lineStyle: {
							color: '#ff0000',
							opacity: 0.6,
							width: 15,
						},
						data: state.yinbiDiyuData,
					},
				],
			};
			myChart.setOption(option, true);
			window.addEventListener('resize', () => {
				myChart.resize();
			});

			//lhc added
			//init
			state.curSearchPoint = new BMap.Point();
			state.curSearchMarker = new BMap.Marker();
			state.startGhLuxianPoint = new BMap.Point();
			state.endGhLuxianPoint = new BMap.Point();
			// 从echarts对象中获取bmap对象
			const bmap = (state.bmap = myChart.getModel().getComponent('bmap').getBMap());
			bmap.setMinZoom(10);
			bmap.setMaxZoom(19);

			bmap.addEventListener('click', function (e) {
				if (state.showToolsBox) {
					if (state.isMarkActive) {
						state.isMarkActive = false;
						if (state.pageType == '集结点') {
							state.jijieDian.push({
								name: '',
								value: [e.point.lng, e.point.lat, undefined],
							});
							myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: state.pageType,
										data: state.jijieDian,
									},
								],
							});

							//显示对话框
							editDialogShowByLoc(e.offsetX, e.offsetY);
							resetTempArticleModel();
						} else if (state.pageType == '警报点') {
							state.baozhangDian.push({
								name: '',
								value: [e.point.lng, e.point.lat, undefined],
							});
							myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: state.pageType,
										data: state.baozhangDian,
									},
								],
							});

							//显示对话框
							editDialogShowByLoc(e.offsetX, e.offsetY);
							resetTempArticleModel();
						} else {
							ElMessage.error('标注仅用于集结点和警报点,路线/区域请点击手绘');
						}
					} else {
						state.showToolsBox = false;
					}
				} else if (state.showLuxian) {
					let subitem = {
						address: '[' + e.point.lng + ',' + e.point.lat + ']',
						longitude: e.point.lng,
						latitude: e.point.lat,
					};
					if (state.isStartLuxianFocus) {
						setQizhongdianInput(subitem);
					} else if (state.isEndLuxianFocus) {
						setQizhongdianInput(subitem);
					}
				} else if (state.isShouhuiActive) {
					if (state.pageType == '疏散路线') {
						state.currentLxDian.push({
							name: dftSeriesLinesData.name,
							value: [e.point.lng, e.point.lat],
						});
						if (state.currentLxDian.length == 1) {
							state.luxianDian.push({
								name: dftSeriesLinesData.name,
								value: [e.point.lng, e.point.lat],
								label: { show: true },
							});
						} else {
							state.luxianDian.push({
								name: dftSeriesLinesData.name,
								value: [e.point.lng, e.point.lat],
							});
						}
						myChart.setOption({
							series: [
								{
									// 根据名字对应到相应的系列
									name: '路线点',
									data: state.luxianDian,
								},
							],
						});

						if (state.currentLxDian.length > 1) {
							if (state.currentLxDian.length == 2) {
								let currentLuxianData = cloneDeep(dftSeriesLinesData);
								state.currentLxDian.forEach((ele) => {
									currentLuxianData.coords.push(ele.value);
								});
								state.shusanLuxianData.push(currentLuxianData);
							} else {
								state.shusanLuxianData.forEach((ele) => {
									if (ele.name == dftSeriesLinesData.name) {
										ele.coords.push([e.point.lng, e.point.lat]);
									}
								});
							}
							myChart.setOption({
								series: [
									{
										// 根据名字对应到相应的系列
										name: '疏散路线',
										data: state.shusanLuxianData,
									},
								],
							});
						}
					} else {
						ElMessage.error('点击仅用于疏散路线,区域请按住鼠标左键拖动');
					}
				}
			});

			bmap.addEventListener('dblclick', function (e) {
				if (state.isShouhuiActive) {
					state.isShouhuiActive = false;
					state.currentLxDian = [];
					/*
		    		nextTick(() => {	    							
	          			state.bmap.enableDoubleClickZoom();
	        		});
	        		*/
					//显示对话框
					editDialogShowByLoc(e.offsetX, e.offsetY);
					resetTempArticleModel();
				}
			});

			bmap.addEventListener('mousemove', function (e) {
				    let nowPnt = {x:0,y:0};
					nowPnt.x = e.domEvent.pageX;
					nowPnt.y = e.domEvent.pageY;
					let chaPnt = {x:Math.abs(nowPnt.x-lastPnt.x),y:Math.abs(nowPnt.y-lastPnt.y)};
					if (state.isMouseDown) {
						if (state.isShouhuiActive) {
							if (state.pageType == '疏散地域') {
								if (state.currentSsdyDian.length == 0) {
									state.currentSsdyDian.push({
										name: dftSeriesLinesData.name,
										value: [e.point.lng, e.point.lat],
									});
									state.shusandiyuDian.push({
										name: dftSeriesLinesData.name,
										value: [e.point.lng, e.point.lat, undefined],
									});
									myChart.setOption({
										series: [
											{
												// 根据名字对应到相应的系列
												name: '疏散地域点',
												data: state.shusandiyuDian,
											},
										],
									});
								} else {
									let startDian = state.currentSsdyDian[0];

									if (state.currentSsdyDian.length == 1) {
										state.currentSsdyDian.push({
											name: dftSeriesLinesData.name,
											value: [e.point.lng, e.point.lat],
										});
										let currentSsdyData = cloneDeep(dftSeriesLinesData);

										currentSsdyData.coords.push(
											startDian.value,
											[e.point.lng, startDian.value[1]],
											[e.point.lng, e.point.lat],
											[startDian.value[0], e.point.lat],
											startDian.value
										);

										state.shusanDiyuData.push(currentSsdyData);
									} else {
										if(chaPnt.x<20||chaPnt.y<20)
										return;
										lastPnt.x = nowPnt.x;
										lastPnt.y = nowPnt.y;
										state.shusanDiyuData.forEach((ele) => {
											if (ele.name == dftSeriesLinesData.name) {
												ele.coords.splice(
													1,
													4,
													[e.point.lng, startDian.value[1]],
													[e.point.lng, e.point.lat],
													[startDian.value[0], e.point.lat],
													startDian.value
												);
											}
										});
									}
									myChart.setOption({
										series: [
											{
												// 根据名字对应到相应的系列
												name: '疏散地域',
												data: state.shusanDiyuData,
											},
										],
									});
								}
							} else if (state.pageType == '隐蔽地域') {
								if (state.currentYbdyDian.length == 0) {
									state.currentYbdyDian.push({
										name: dftSeriesLinesData.name,
										value: [e.point.lng, e.point.lat],
									});
									state.yinbidiyuDian.push({
										name: dftSeriesLinesData.name,
										value: [e.point.lng, e.point.lat],
									});
									myChart.setOption({
										series: [
											{
												// 根据名字对应到相应的系列
												name: '隐蔽地域点',
												data: state.yinbidiyuDian,
											},
										],
									});
								} else {
									let startDian = state.currentYbdyDian[0];

									if (state.currentYbdyDian.length == 1) {
										state.currentYbdyDian.push({
											name: dftSeriesLinesData.name,
											value: [e.point.lng, e.point.lat],
										});
										let currentYbdyData = cloneDeep(dftSeriesLinesData);

										currentYbdyData.coords.push(
											startDian.value,
											[e.point.lng, startDian.value[1]],
											[e.point.lng, e.point.lat],
											[startDian.value[0], e.point.lat],
											startDian.value
										);

										state.yinbiDiyuData.push(currentYbdyData);
									} else {
										state.yinbiDiyuData.forEach((ele) => {
											if (ele.name == dftSeriesLinesData.name) {
												ele.coords.splice(
													1,
													4,
													[e.point.lng, startDian.value[1]],
													[e.point.lng, e.point.lat],
													[startDian.value[0], e.point.lat],
													startDian.value
												);
											}
										});
									}
									myChart.setOption({
										series: [
											{
												// 根据名字对应到相应的系列
												name: '隐蔽地域',
												data: state.yinbiDiyuData,
											},
										],
									});
								}
							} else {
								ElMessage.error('拖动仅用于绘制地域');
							}
						}
					}

				// }, 100);
			});

			myChart.getZr().on('mousedown', (e:any) => {

				if (state.isShouhuiActive) {
					if (state.pageType == '疏散地域' || state.pageType == '隐蔽地域') {
						state.bmap.disableDragging();
						state.isMouseDown = true;
						lastPnt.x = e.event.pageX;
						lastPnt.y = e.event.pageY;
					}
				}
			});
			myChart.getZr().on('mouseup', (e) => {

				if (state.isShouhuiActive) {
					if (state.pageType == '疏散地域' || state.pageType == '隐蔽地域') {
						state.isShouhuiActive = false;
						state.bmap.enableDragging();
						state.isMouseDown = false;
						state.currentSsdyDian = [];
						state.currentYbdyDian = [];
						//显示对话框
						editDialogShowByLoc(e.offsetX, e.offsetY);
						resetTempArticleModel();
					}
				}
			});

			myChart.on('click', (e) => {
				for (let i = 0; i < state.getTblData.data.length; i++) {
					let ele = state.getTblData.data[i];
					if (ele.title == e.name) {
						state.tempArticleModel = cloneDeep(ele);
						state.dialogStatus = 'update';
						editDialogShowByLoc(e.event.offsetX, e.event.offsetY);
						state.uptDelContext = e;
						break;
					}
				}
			});

			//test start

			//test end
		};
		// 页面加载时
		onMounted(async () => {
			await initEchartsMap();
			await loadTypeName();
		});
		onUnmounted(() => {
			state.myChart.dispose();
		});
		return {
			initTagViewHeight,
			...toRefs(state),
			changeRouteIndex,
			clickSubTools,
			searchAddr,
			clickGhLuxian,
			setSearchInput,
			setQizhongdianInput,
			startGhLuxianFocus,
			endGhLuxianFocus,
			searchBoxFocus,
			closeSearchContent,
			t,
			handleDelete,
			createData,
			updateData,
			setSelectItem,
		};
	},
};
</script>

